<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电影售票</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="sgin.js"></script>
<!--    https://www.yidepiao.com/ -->
</head>
<body>
<div id="app">
    <el-container>
        <el-header class="title">
            <div class="c900 flex">
                <el-link :underline="false" href="index.html"><h1>电影售票平台</h1></el-link>
                <nav>
                    <el-link href="index.html" class="center" :underline="false" style="background-color: #99f7">首页</el-link>
                    <el-link href="hots.html" class="center" :underline="false">热映电影</el-link>
                    <el-link class="center" :underline="false">电影院</el-link>
                    <el-link class="center" :underline="false">优惠活动</el-link>
                </nav>
                <el-input style="width: auto" placeholder="请输入电影,影院,活动">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
                <div class="flex">
                    <sgin ref="a" style="display: flex;gap: 10px">
                        <!--                        <template #logined="props">-->
                        <template #logined>
                            <el-avatar :src="$refs.a != null?$refs.a.myinfo.head:''"></el-avatar>
                            <el-link href="sgin/logout">退出</el-link>
                        </template>
                        <template #nologin>
                            <el-link href="register.html">注册</el-link>
                            <el-button type="text"@click="$refs.a.showForget=true">忘记密码</el-button>
                            <el-link href="login.html">登录</el-link>
                        </template>
                    </sgin>
                </div>
            </div>
        </el-header>
        <el-main>
            <div class="c900">
                <h1 style="width: 40%;margin: 20px auto">注册账号</h1>
                <form class="grid2">
                    <label for="">账号:</label><input type="text">
                    <label for="">密码:</label><input type="password">
                    <label for="">确认密码:</label><input type="password">
                    <label for="">电话:</label><input type="number">
                    <label for="">邮箱:</label><input type="email">
                    <label for="">头像:</label><input type="text">
                    <div style="grid-column: 2; text-align: end">
                        <a href="login.html" style="margin-right: 20px">去登录</a>
                        <button style="padding: 5px 20px">注册</button>
                    </div>
                </form>
            </div>
        </el-main>
        <el-footer class="flex title" style="justify-content: center;height: 30px">
            <a href="http://www.hyycinfo.com" target="_blank">源辰信息科技</a>
        </el-footer>
    </el-container>
</div>
</body>
<script>
    var v = new Vue({
        el:"#app"
    })
</script>
<style>
    html,body{
        margin: 0px;
        padding: 0px;
    }
    .el-main{
        padding: 10px 0px;
        overflow-x: hidden;
        background-image: url("https://img2.baidu.com/it/u=2454799735,2381918605&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500");
        background-size: cover;
    }
    .el-card{
        margin-top: 10px;
    }
    html,body,#app,#app>.el-container{
        height: 100%;
    }
    *{
        transition: all .5s;
    }
    a{
        text-decoration: none;
    }
    .c900{
        width: 1000px;
        margin: auto;
    }
    .title{
        background-color: #0a699999;
        color: #fff;
    }
    .title *{
        color: #fff;
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        gap: 10px;
    }
    .flex>*{
        margin: 0px;
        padding: 0px;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
        display: flex;
        height: 100%;
    }
    nav .el-link{
        padding-inline: 20px;
        font-size: 1em;
    }
    nav .el-link:hover{
        background-color: #99f7;
    }
    img{
        width: 100%;
        object-fit: cover;
    }
    .hsc:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #8888;
    }
    .grid2{
        display: grid;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    .price{
        font-size: .8em;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 50% 50%;
        padding: 5px;
    }
    .price>span{
        display: flex;
        justify-content: start;
        align-items: center;
    }
    small{
        font-size: .4em;
    }
    .el-icon-search{
        color: #666;
    }
    .c900>form{
        width: 40%;
        margin: auto;
        padding: 30px;
        border: 1px green solid;
        border-radius: 10px;
        background-color: lightblue;
        gap: 10px;
    }
    .c900>form label,.c900>form input{
        text-align: left;
        box-sizing: border-box;
        height: 35px;
        display: flex;
        align-items: center;
        outline: none;
        padding: 10px;
    }
</style>

</html>